<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>path.convert.create</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    	<div class="container">
  
	<div id="app">
		<div class="form-group">
   		<input type="text" id="path" class="form-control" name="" v-model="path"  placeholder="输入路径自动转换windows分隔符\为/" >
   		</div>
   		<div class="form-group">
   			<input type="text" id="Wpath" class="form-control" name=""  v-model="Wpath">
   		</div>


   	</div>
  
</div> 

    

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                path: '',
                Wpath:""
            },
            watch:{
            	path:function(newString,oldString){
            		this.Wpath = newString.replace(/\\/g,"/");
            	}
            }
        });

        

    </script>
</body>

</html>